{{setTitle     "定制"}}
{{setSubTitle  "选择你需要的模块"}}
{{setActiveNav "customize"}}

{{> header}}

<div class="content">

    <h2 class="content-subhead">所有模块</h2>
    <p>
        Pure的所有模块有两种模式，一种有响应式的，一种是非响应式的，你需要在你的项目中选择一个合适的。
    </p>

    <table class="pure-table pure-table-bordered">
        <thead>
            <tr>
                <th>名称</th>
                <th>CSS 链接</th>
                <th>大小(压缩后的)</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>响应式的</td>
                <td>http://yui.yahooapis.com/pure/{{pure_version}}/pure-min.css</td>
                <td>{{fileSize "pure"}}</td>
            </tr>
            <tr>
                <td>非响应式的</td>
                <td>http://yui.yahooapis.com/pure/{{pure_version}}/pure-nr-min.css</td>
                <td>{{fileSize "pure-nr"}}</td>
            </tr>
        </tbody>
    </table>


    <h2 class="content-subhead">单独模块</h2>
    <p>
        你也可以单独使用这些模块。雅虎提供了CDN支持，支持把请求的各个模块合并成一个独立的CSS文件返回。这里有一个合并模块的URL的例子，合并<a href="{{pages.base}}">基础模块</a>，<a href="{{pages.grids}}">网格模块</a>和<a href="{{pages.forms}}">表单模块</a>：
    </p>

{{#code}}
<link rel="stylesheet" href="http://yui.yahooapis.com/combo?pure/{{pure_version}}/base-min.css&pure/{{pure_version}}/grids-min.css&pure/{{pure_version}}/forms-min.css">
{{/code}}

    <table class="pure-table pure-table-bordered">
        <thead>
            <tr>
                <th>名称</th>
                <th>CSS链接</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>基本模块</td>
                <td>http://yui.yahooapis.com/pure/{{pure_version}}/base-min.css</td>
            </tr>
            <tr>
                <td>按钮模块</td>
                <td>http://yui.yahooapis.com/pure/{{pure_version}}/buttons-min.css</td>
            </tr>
            <tr>
                <td>表单模块（响应式的）</td>
                <td>http://yui.yahooapis.com/pure/{{pure_version}}/forms-min.css</td>
            </tr>
            <tr>
                <td>表单模块（非响应式）</td>
                <td>http://yui.yahooapis.com/pure/{{pure_version}}/forms-nr-min.css</td>
            </tr>
            <tr>
                <td>网格模块（响应式的）</td>
                <td>http://yui.yahooapis.com/pure/{{pure_version}}/grids-min.css</td>
            </tr>
            <tr>
                <td>网格模块（非响应式的）</td>
                <td>http://yui.yahooapis.com/pure/{{pure_version}}/grids-nr-min.css</td>
            </tr>
            <tr>
                <td>菜单模块（响应式的）</td>
                <td>http://yui.yahooapis.com/pure/{{pure_version}}/menus-min.css</td>
            </tr>
            <tr>
                <td>菜单模块（非响应式的）</td>
                <td>http://yui.yahooapis.com/pure/{{pure_version}}/menus-nr-min.css</td>
            </tr>
            <tr>
                <td>表格模块</td>
                <td>http://yui.yahooapis.com/pure/{{pure_version}}/tables-min.css</td>
            </tr>
        </tbody>
    </table>

    <h2 class="content-subhead">皮肤</h2>
    <p>
        Pure只提供最简洁的样式，允许你去定制自己样式。如果你想要开发一个主题，<a href="https://git.corp.yahoo.com/pages/yui/skinbuilder/">YUI的皮肤编辑器</a>会给你带来很大的帮助。通过简单地点击就能够生成一个Pure主题所需要的CSS。
    </p>

    <p>
        <a href="http://yui.github.io/skinbuilder/?mode=pure" class="pure-button">开始编辑皮肤</a>
    </p>

    <h2 class="content-subhead">在GitHub上贡献代码</h2>
    <p>
        Pure是一个依照BSD发布的开源项目。欢迎你提交问题反馈。查看<a href="https://github.com/yui/pure">GitHub项目</a>.
    </p>

</div>
